import React, {useCallback, useState} from 'react';
import {Button, Checkbox, Col, DatePicker, Form, Input, Modal, Row, Spin, Tooltip} from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN';
import type {FormInstance} from 'antd/es/form';
import request from "../../../utils/request";
import API from "../../../utils/api";

const {RangePicker} = DatePicker;

const FormSearch: React.FC<{
    form: FormInstance<any>;
    loading: boolean;
    clearAll: () => void;
    search: () => void;
    autoUpdating: boolean;
    autoUpdate: (update: boolean) => void;
    checkedIdList: string[],
    showApproveDetail: () => void
    checkAll: (all: boolean) => void
}> = ({
          form,
          loading,
          clearAll,
          search,
          autoUpdating,
          checkAll,
          checkedIdList = [],
          showApproveDetail,
      }) => {
    const [visible, setVisible] = useState(false);
    const [modalLoading, setModalLoading] = useState(false);
    const [all, setAll] = useState(false);
    const handleFinish = useCallback((data) => {
        setModalLoading(true);
        request(API.GET_BANK_INFO, {method: 'POST', data}).then(res => {
            if (search) {
                search()
            }
        }).finally(() => {
            setModalLoading(false);
            setVisible(false);
        })
    }, [search]);

    return (
        <>
            <Form onFinish={() => search()} labelCol={{span: 5}} wrapperCol={{span: 19}} form={form}>
                <Row>
                    <Col span={9}>
                        <Form.Item label="客户名称" name="userName">
                            <Input placeholder="请输入需要查看的客户名称"/>
                        </Form.Item>
                    </Col>
                    <Col span={9}>
                        <Form.Item name="createTime" label="创建时间">
                            <RangePicker
                                format='YYYY-MM-DD'
                                style={{width: '100%'}}
                                getPopupContainer={(node) => document.getElementById('history') || node}
                                locale={locale}
                                allowEmpty={[true, true]}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item wrapperCol={{span: 24}} style={{textAlign: 'right'}}>
                            <Tooltip title={all ? "取消全选" : '全选'}>
                                <Checkbox
                                    style={{marginRight: '24px'}}
                                    checked={all}
                                    onChange={(e) => {
                                        setAll(e.target.checked);
                                        checkAll(e.target.checked);
                                    }}
                                />
                            </Tooltip>
                            <Button.Group style={{margin: '0 auto'}}>
                                <Button htmlType="submit" type="primary" loading={loading}>
                                    查询
                                </Button>
                                <Button onClick={clearAll}>清除</Button>
                            </Button.Group>
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={18}/>
                    <Col span={6}>
                        <Form.Item wrapperCol={{span: 24}} style={{textAlign: 'right'}}>
                            <Button
                                style={{marginRight: '8px'}}
                                onClick={() => {
                                    setVisible(true)
                                }}
                            >
                                获取贷款信息
                            </Button>
                            {checkedIdList && !!checkedIdList.length && (
                                <Button onClick={showApproveDetail}>
                                    查看不动产证明
                                </Button>
                            )}
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
            <Modal
                closable={false}
                maskClosable={false}
                visible={visible}
                title='贷款合同信息提取'
                footer={null}
                destroyOnClose>
                <Spin spinning={modalLoading}>
                    <Form onFinish={handleFinish}>
                        <Form.Item name='name' label='客户姓名'>
                            <Input placeholder='请输入客户姓名'/>
                        </Form.Item>
                        <Form.Item name='certNo' label='客户证件号'>
                            <Input placeholder='请输入客户证件号'/>
                        </Form.Item>
                        <Form.Item style={{textAlign: 'center'}}>
                            <Button style={{margin: '0 4px'}} htmlType='submit' type='primary'>提交</Button>
                            <Button style={{margin: '0 4px'}} onClick={() => setVisible(false)}>取消</Button>
                        </Form.Item>
                    </Form>
                </Spin>
            </Modal
            >
        </>
    );
};

export default FormSearch;
